<template>
  <el-col class="areaScene-wrap" :span="24">
    <el-col :span="12">
      <el-select
        @change="firstLevelChange"
        v-model="modTypes.modType1"
        placeholder="请选择分类"
      >
        <el-option label="全部分类" value></el-option>
        <el-option
          v-for="item in parentArr"
          :key="item.moduleId"
          :value="item.moduleId"
          :label="item.moduleName"
          @change="firstLevelChange"
        ></el-option>
      </el-select>
    </el-col>

    <el-col :span="12">
      <el-select
        v-model="modTypes.modType2"
        @change="secondLevelChange"
        placeholder="请选择子分类"
      >
        <el-option label="全部子分类" :value="modTypes.modType1"></el-option>
        <el-option
          v-for="item in childArr"
          :key="item.moduleId"
          :value="item.moduleId"
          :label="item.moduleName"
        ></el-option>
      </el-select>
    </el-col>
  </el-col>
</template>

<script>
export default {
  name: 'sceneSelect',
  props: ['modTypes', 'selectModel', 'deptId', 'parentArr', 'childArr'],
  data () {
    return {
      tempPromise: {},
      firstArr: [],
      secondArr: [],
      sceneId: this.selectModel
    }
  },
  watch: {
    deptId (val) {
      this.modTypes.modType1 = ''
      this.modTypes.modType2 = ''
      // this.$emit('onSceneChange', '')
      this.getSceneByAreaId(val)
    }

  },

  methods: {
    getSceneByAreaId (deptId) {
      let url = this.$base.getUrl('getModuleInfoTree')
      let params = {
        url: url,
        data: {
          deptId: deptId
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        let newNodes = []
        res.nodes.forEach((item) => {
          if (item.showFlag !== 0) {
            newNodes.push(item)
          }
        })
        this.firstArr = newNodes
      })
    },
    // 场景onchange事件
    firstLevelChange (modType1) {
      this.$emit('firstSelectChange', modType1)
    },
    secondLevelChange (modType2) {
      if (!this.modTypes.modType2) {
        this.modTypes.modType2 = modType2
      }
      this.sceneId = modType2
      this.$emit('secondSelectChange', modType2)
    },
    firstLevel (res) {
      for (let i of this.firstArr) {
        if (res === i.moduleId) {
          this.secondArr = i.nodes || []
        }
      }
    }
  }
}
</script>

<style scoped>
.areaScene-wrap {
  padding: 0 !important;
}
</style>
